<template>
  <div class="m-input" :class="{ 'light': bgColor === 'light' }">
    <Input v-bind="$attrs" v-on="$listeners">
      <template v-slot:prefix>
        <slot name="prefix"/>
      </template>
      <template v-slot:suffix>
        <slot name="suffix"/>
      </template>
      <template v-slot:prepend>
        <slot name="prepend"/>
      </template>
      <template v-slot:append>
        <slot name="append"/>
      </template>
    </Input>
  </div>
</template>

<script>
import { Input } from 'element-ui'

export default {
  name: 'MInput',
  components: { Input },
  props: {
    bgColor: String
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.light {
  /deep/ .el-input__inner, /deep/ .el-textarea__inner {
    background-color: #fff !important;
  }

  /deep/ .el-input__count {
    background-color: #fff !important;
  }
}

.m-input {

  /deep/ .el-input__inner {
    height: 45px;
  }

  /deep/ .el-input__inner, /deep/ .el-textarea__inner {
    background-color: #F3F4F8;
    border-radius: 10px;
    border-color: #e9e9e9;
  }

  /deep/ .el-input__count {
    background-color: #F3F4F8;
  }

  /deep/ .el-input__inner:focus {
    border-color: $theme-color-1;
  }

  /deep/ .el-textarea__inner:focus {
    border-color: $theme-color-1;
  }

  /deep/ .el-input--prefix {
    .el-input__prefix {
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-input__inner {
      padding-left: 45px;
    }
  }
}
</style>
